<template>
    <div class="notice">
        <p v-if="empty === true">没有被关注的消息</p>
        <router-link class="oneNotice" :to="`/themself/${info.userId}`" v-for="(info,index) in infoList" :key="index">
            <div class="headPic">
                <van-image 
                    width="1.3rem" 
                    height="1.3rem" 
                    radius="100%" 
                    fit="cover" 
                    :src="info.img" 
                />
            </div>
            <div class="detail">
                <div class="detailLeft">
                    <p>{{info.nickname}}</p>
                    <p>{{info.profile}}</p>
                    <p>{{info.time}}</p>
                </div>
                <div class="detailRight">
                    <button :class="info.followName" @click.prevent="follow(info.userId,index)">{{info.followName === 'isFollow' ? '已关注' :'关注'}}</button>
                </div>
            </div>
        </router-link>
    </div>

</template>

<script> 
import jwtDecode from 'jwt-decode'
 import axios from 'axios'
export default {
    name:'Fans', 
    data() {
        return {
            decode:null,
            infoList:null,
            followName:'notFollow',
            empty:false  
        }
    },
    mounted(){
        //获取用户的id
        let token=sessionStorage.getItem("token")
        this.decode = jwtDecode(token);
        //获取粉丝
        this.getInfo(this.decode.userId)        
    },
    methods: {
        getInfo(userId){ 
            axios({
                url:"/body/getSuchMessage",
                method:'get',
                params:{
                    classes:4, 
                    userId:userId
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                if(data.data.code === 20000){
                    if(data.data.data.length !== 0){
                        this.empty = false
                        this.infoList = data.data.data
                        console.log(data.data.data)
                        //检查这个人有没有关注
                        for(let i = 0;i < this.infoList.length;i++){
                            axios({
                                url:'/follow/judgeFollow',
                                method:'get',
                                params:{
                                    userId:this.decode.userId,
                                    useredId:this.infoList[i].userId
                                },
                                headers:{
                                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                                }
                            }).then(data=>{
                                if(data.data.data === '您未关注此用户'){
                                    this.infoList[i].followName = 'notFollow'
                                    this.infoList = Object.assign({},this.infoList)
                                }else{
                                    this.infoList[i].followName = 'isFollow'
                                    this.infoList = Object.assign({},this.infoList)
                                }
                            }).catch(err=>{
                                console.log(err)
                            })
                        }
                    }else{
                        this.empty = true
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        follow(himId,index){
            //关注
            const followParam = new URLSearchParams()
            followParam.append('userId',String(this.decode.userId))//关注人的id
            followParam.append('useredId',String(himId))//被关注人的id
            axios({
                url:'/follow/addFollow',
                method:'post',
                data:followParam,
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                if(data.data.data !== '成功关注'){
                    this.cancel(himId,index)//取消关注
                }else{
                    if(data.data.code === 20000){
                        console.log('关注成功')
                        this.infoList[index].followName = 'isFollow'
                        this.infoList = Object.assign({},this.infoList)
                        //给服务器发送消息
                        let sendParam = new URLSearchParams()
                        sendParam.append('bodyMessage',this.content)
                        sendParam.append('content',`${this.decode.nickname} 关注了你`)
                        sendParam.append('form',String(this.decode.userId))
                        sendParam.append('to',String(this.userId))
                        sendParam.append('username',this.decode.username)
                        sendParam.append('calsses',String(4))
                        axios({
                            method:'post',
                            url:'/body/sendMessage',
                            data:sendParam,
                            headers:{
                                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                            }
                        }).then(data=>{
                            if(data.data.code === 20000){
                                console.log('发送成功')
                            }
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        cancel(himId,index){
            const calcelParam = new URLSearchParams()
            calcelParam.append('userId',String(this.decode.userId))
            calcelParam.append('useredId',String(himId))
            axios({
                url:'/follow/deleteFollow',
                method:"DELETE",
                data:calcelParam,
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{//取消关注之后
                if(data.data.code === 20000){
                    console.log('取消关注')
                    this.infoList[index].followName = 'notFollow'
                    this.infoList = Object.assign({},this.infoList)
                }
            }).catch(err=>{
                console.log(err)
            })
        }   
    },
}
</script>

<style lang="less" scoped>
    .isFollow{ 
        color: var(--themeColor) !important;
        background-color: white !important;
        border-color: var(--themeColor) !important;
    }
    .notFollow{
        border-color: var(--themeColor) !important;
        color: white !important;
        background-color: var(--themeColor) !important; 
    }
    .oneNotice{
        display: flex;
        padding: 0.25rem;
        border-top: solid 1px #dbdbdb;
        .headPic{
            display: flex;
            align-items: center;
        }
        .detail{
            flex: 1;
            display: flex;
            .detailLeft{
                margin-left: 0.3rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #3b3b3b;
                p,i{
                    font-size: 0.35rem;
                }
                p{
                    &:nth-child(1){
                        color: black;
                        margin-bottom: 0.1rem;
                    }
                    &:nth-child(2){
                        margin-bottom: 0.2rem;
                    }
                }
            }
            .detailRight{
                display: flex;
                align-items: center;
                button{
                    background-color: var(--themeColor);
                    padding: 0.2rem 0rem;
                    border-radius: 100px;
                    outline: none;
                    border: solid 1px;
                    border-color: var(--themeColor);
                    color: white;
                    width: 1.7rem;
                }
            }
        }
    }
</style>